{% extends "tutorial/base.html" %}
{% from "tutorial/repo.html" import render_repo with context %}

{% block title %}Requesting Data{% endblock %}
{% block subtitle %}Learn how to retrieve data from GitHub.{% endblock %}

{% block container %}
  <h4 class="py-1 m-0">GitHub API</h4>
  <p class="mb-5">GitHub provides a way to request and interact with data on its platform. This makes it possible to use GitHub data in your application. For example, you can see all your favorite GitHub projects or show what code you are working. This interaction is done through a interface called an API. We provided examples of using GitHub's API to help you get started.</a>

  <div class="border rounded p-5 mb-5">
    <h5 class="py-1 m-0">Retrieving your starred projects</h5>
    <p>You can retrieve your starred projects on GitHub using the <code>/user/starred</code> endpoint. Within this starter project, you can also use the <code>services/github.py</code> module, which makes it easier to make an authenticated request.<p>
    <p>A GET request to the <code>/user/starred</code> endpoint using the <code>github.py</code> module would follow this format:</p>
    <pre class="bg-light rounded"><code>
      github = GitHub(access_token=session['access_token'])
      results = github.get('/user/starred')
    </code></pre>
    <p class="mt-4">As a result, you will see your starred repositories below:</p>
    {% if tutorial1|length == 0 %}
      <div class="bg-light rounded p-5 text-center text-muted">
        {% if g.user %}
          <p class="m-4">You haven't starred any repositories on GitHub yet. You can star <a href="https://github.com/MLH/mlh-hackathon-flask-starter">this project here</a>.</p>
        {% else %}
          <p class="m-4">This example requires an authenticated user. Please log in to see your starred repositories.</p>
        {% endif %}
      </div>
    {% endif %}

    {% for item in tutorial1 %}
      {{ render_repo(item, loop) }}
    {% endfor %}
  </div>

  <div class="border rounded p-5">
    <h5 class="py-1 m-0">Searching GitHub</h5>
    <p>The endpoint for searching GitHub projects is located at <code>/search/repositories</code>. You can use this endpoint to find projects on GitHub. Within this starter project, you also can use the <code>services/github.py</code> module, which makes it easier to make an authenticated request.
    <p>A GET request to the <code>/search/repositories</code> endpoint using the <code>github.py</code> module would follow this format:</p>
    <pre class="bg-light rounded"><code>
      github = GitHub(access_token=session['access_token'])
      results = github.get('/search/repositories')
    </code></pre>
    <p class="mt-4">As a result, you should be able to search for GitHub projects below:</p>
    <div class="text-center mx-auto mb-3">
      <form action="{{ url_for('tutorial.requesting') }}" method="get" class="d-flex">
        <input name="query" class="form-control form-control-sm" value="{{ query }}" placeholder="Search for repos" />
        <button type="submit" class="btn btn-primary btn-sm ml-1">Search</button>
      </form>
    </div>

    {% if tutorial2|length == 0 %}
      <div class="rounded bg-light p-5 text-center text-muted">
        {% if g.user %}
          {% if query or query|length == 0 %}
            <p class="m-4">You can use the search bar above to find new projects.</p>
          {% else %}
            <p class="m-4">Cannot find a repository that matches that input. Please try again.</p>
          {% endif %}
        {% else %}
          <p class="m-4">Please sign in to use the search functionality.</p>
        {% endif %}
      </div>
    {% endif %}

    {% for item in tutorial2 %}
      {{ render_repo(item, loop) }}
    {% endfor %}
  </div>

{% endblock %}
